import React, { useMemo, useState, useRef } from 'react'
import { Button, Modal, Radio, Form, Input, Select, Breadcrumb } from 'antd'
import { EditOutlined } from '@ant-design/icons'
import { updateInfoApi, getUserApi, changeAvatarApi } from '../../apis/user'
import { eventBus, eventNames } from "../../utils/eventBus"

export default function Profile() {
    const { avatar, deptName, description, email, mobile, roleName, ssex, username, deptId, status, roleId, userId } = JSON.parse(localStorage.user)
    const sex = ssex === '0' ? '男' : (ssex === '1' ? '女' : '保密')

    const [open, setOpen] = useState(false);
    const { TextArea } = Input;
    const formRef = useRef()
    const onFinish = (values) => {
        setOpen(false)
        console.log('Success:', values);
        updateInfoApi({
            ...values,
            status,
            roleId,
            username,
            userId
        }).then(() => {
            getUserApi().then(res => {
                localStorage.user = JSON.stringify(res)
                window.location.reload()
            })
        })
    };

    const [modal1Open, setModal1Open] = React.useState(false);
    const [avatarList, setavatarList] = React.useState([
        {
            url: "http://xawn.f3322.net:8002/distremote/static/avatar/default.jpg",
            name: "default.jpg",
        },
        {
            url: "http://xawn.f3322.net:8002/distremote/static/avatar/1d22f3e41d284f50b2c8fc32e0788698.jpeg",
            name: "1d22f3e41d284f50b2c8fc32e0788698.jpeg",
        },
        {
            url: "http://xawn.f3322.net:8002/distremote/static/avatar/2dd7a2d09fa94bf8b5c52e5318868b4d9.jpg",
            name: "2dd7a2d09fa94bf8b5c52e5318868b4d9.jpg",
        },
        {
            url: "http://xawn.f3322.net:8002/distremote/static/avatar/2dd7a2d09fa94bf8b5c52e5318868b4df.jpg",
            name: "2dd7a2d09fa94bf8b5c52e5318868b4df.jpg",
        },
        {
            url: "http://xawn.f3322.net:8002/distremote/static/avatar/8f5b60ef00714a399ee544d331231820.jpeg",
            name: "8f5b60ef00714a399ee544d331231820.jpeg",
        },
        {
            url: "http://xawn.f3322.net:8002/distremote/static/avatar/496b3ace787342f7954b7045b8b06804.jpeg",
            name: "496b3ace787342f7954b7045b8b06804.jpeg",
        },
        {
            url: "http://xawn.f3322.net:8002/distremote/static/avatar/a43456282d684e0b9319cf332f8ac468.jpeg",
            name: "a43456282d684e0b9319cf332f8ac468.jpeg",
        },
        {
            url: "http://xawn.f3322.net:8002/distremote/static/avatar/c7c4ee7be3eb4e73a19887dc713505145.jpg",
            name: "c7c4ee7be3eb4e73a19887dc713505145.jpg",
        },
    ]);
    function changeAvatar(item) {
        console.log(item);
        changeAvatarApi({
            username: JSON.parse(localStorage.user).username,
            avatar: item.name,
        }).then((res) => {
            const user = JSON.parse(localStorage.user);
            user.avatar = item.name;
            localStorage.user = JSON.stringify(user);
            setModal1Open(false);
            eventBus.emit(eventNames.syncProfileInfo);
            location.reload()
        });
    }

    return (
        <div >
            <div style={{ border: '1px solid #eee', height: '60px', lineHeight: '60px', paddingRight: '20px', width: '80vw' }}>
                <span style={{ color: 'skyblue', float: 'right', cursor: 'pointer', }} onClick={() => setOpen(true)}>编辑资料</span>
            </div>
            <div style={{ border: '1px solid #eee', padding: '20px 100px', display: 'flex', width: '80vw' }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginRight: 100 }}>
                    <img src={"http://xawn.f3322.net:8002/distremote/static/avatar/" + avatar} style={{ width: 160, height: 160, marginBottom: 20 }} />
                    <Button icon={<EditOutlined />} onClick={() => setModal1Open(true)}>修改头像</Button>
                    <Modal
                        footer={[]}
                        title="选择头像"
                        style={{ top: 200 }}
                        open={modal1Open}
                        onCancel={() => setModal1Open(false)}
                    >
                        {avatarList.map(item => {
                            return <img key={item.name} src={item.url} className='selestAvatar'
                                style={{ width: 96, height: 96, marginRight: 22, marginBottom: 20 }}
                                alt="点击选择"
                                onClick={() => changeAvatar(item)} />
                        })}
                    </Modal>
                </div>
                <div>
                    <ul style={{ color: '#aaa' }}>
                        <li>账户：{username}</li>
                        <li style={{ margin: '10px 0' }}>角色：{roleName}</li>
                        <li>性别：{sex}</li>
                        <li style={{ margin: '10px 0' }}>电话：{mobile}</li>
                        <li>邮箱：{email}</li>
                        <li style={{ margin: '10px 0' }}>部门：{deptName}</li>
                        <li>描述：{description}</li>
                    </ul>
                </div>
            </div>
            <Modal style={{ position: 'fixed', right: 0 }}
                title="编辑资料"
                open={open}
                onOk={() => formRef.current.submit()}
                onCancel={() => setOpen(false)}
                width={800}
            >
                <Form
                    ref={formRef}
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="邮箱"
                        name="email"
                        initialValue={email}
                        rules={[
                            {
                                required: true,
                                message: '请输入邮箱!',
                            },
                        ]}
                    >
                        <Input value={email} />
                    </Form.Item>

                    <Form.Item
                        label="手机"
                        name="mobile"
                        initialValue={mobile}
                        rules={[
                            {
                                required: true,
                                message: '请输入手机号!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item label="部门" name="deptId" initialValue={deptId}>
                        <Select>
                            <Select.Option value={1} >开发部</Select.Option>
                            <Select.Option value={4} >市场部</Select.Option>
                            <Select.Option value={5}>人事部</Select.Option>
                            <Select.Option value={6}>测试部</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label="性别" name="ssex" initialValue={ssex}>
                        <Radio.Group>
                            <Radio value="0"> 男 </Radio>
                            <Radio value="1"> 女 </Radio>
                            <Radio value="2"> 保密 </Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item label="描述" name="description" initialValue={description}>
                        <TextArea rows={4} />
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >

                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
